<template>
  <div>
    <!--    <div>11</div>-->
    <!--    <Chart :cdata="cdata"/>-->
    <!--    <Chart1 :cdata="chart1data"></Chart1>-->
    <div class="bottom-data">
      <div
          class="item-box mt-2"
          v-for="(item, index) in numberData"
          :key="index"
      >
        <div class="d-flex" style="justify-content: center">
          <dv-digital-flop class="dv-digital-flop" :config="item.number"/>
        </div>
        <p class="text" style="text-align: center;">
          {{ item.text }}
        </p>
      </div>
    </div>
    <Chart :cdata="cdata"/>
  </div>
</template>

<script>
import Chart from './chart.vue'
// import Chart1 from './chart1.vue'

import {getallFields, getticketcount} from "@/api";
// import {ids, timeUtil} from "@/utils/nodeId";

export default {
  data() {
    return {
      drawTiming: null,
      cdata: {
        year: null,
        weekCategory: [],
        radarData: [],
        radarDataAvg: [],
        maxData: 12000,
        weekMaxData: [],
        weekLineData: [],
      },
      chart1data: {},
      numberData: []
    }
  },
  components: {
    Chart,
    // Chart1
  },
  mounted() {
    this.drawTimingFn();
  },
  beforeDestroy() {
    clearInterval(this.drawTiming);
  },
  methods: {
    drawTimingFn() {
      this.setData();
      // this.drawTiming = setInterval(() => {
      //   this.setData();
      // }, 6000);
    },
    async setData() {
      // 清空轮询数据
      this.cdata.weekCategory = [];
      this.cdata.weekMaxData = [];
      this.cdata.weekLineData = [];
      this.cdata.radarData = [];
      this.cdata.radarDataAvg = [];
      getticketcount().then(res => {
        let data = res['ticketCount']
        this.cdata.weekCategory = data.map(v => v.subgroup)
        this.cdata.weekLineData = data.map(v => v.totalTicketCount)
      })

      // const {strEndTime, strStartTime} = timeUtil()
      //保养工单-结束
      let waittingListMaintainBody1 = {
        "workflow_id": {"in": [4]},
        "is_end": {"eq": "true"},
        "create_from": {"eq": "Schedule"}
      };
      //保养工单-未结束
      let waittingListMaintainBody2 = {
        "workflow_id": {"in": [4]},
        "is_end": {"eq": "false"},
        "create_from": {"eq": "Schedule"}
      };

      //维修工单-结束
      let waittingListMaintainBody3 = {
        "workflow_id": {"in": [5]},
        "is_end": {"eq": "true"},
        "create_from": {"eq": "WebPortal"}
      };
      //维修工单-未结束
      let waittingListMaintainBody4 = {
        "workflow_id": {"in": [5]},
        "is_end": {"eq": "false"},
        "create_from": {"eq": "WebPortal"}
      };
      const res1 = await getallFields(waittingListMaintainBody1)
      const res2 = await getallFields(waittingListMaintainBody2)
      const res3 = await getallFields(waittingListMaintainBody3)
      const res4 = await getallFields(waittingListMaintainBody4)
      console.log('res1,res2,res3,res4=>', res1, res2, res3, res4)
      let arr = [
        {
          number: {
            number: [res2.data.total],
            toFixed: 0,
            textAlign: 'center',
            content: '{nt}',
            style: {
              fontSize: 24
            }
          },
          text: '保养工单/未完成'
        },
        {
          number: {
            number: [res1.data.total],
            toFixed: 0,
            textAlign: 'center',
            content: '{nt}',
            style: {
              fontSize: 24
            }
          },
          text: '保养工单/已完成'
        },
        {
          number: {
            number: [res4.data.total],
            toFixed: 0,
            textAlign: 'center',
            content: '{nt}',
            style: {
              fontSize: 24
            }
          },
          text: '维修工单/未完成'
        },
        {
          number: {
            number: [res3.data.total],
            toFixed: 0,
            textAlign: 'center',
            content: '{nt}',
            style: {
              fontSize: 24
            }
          },
          text: '维修工单/已完成'
        }
      ]
      this.numberData = arr
      // let dateBase = new Date();
      // this.cdata.year = dateBase.getFullYear();
      // // 周数据
      // for (let i = 0; i < 7; i++) {
      //   // 日期
      //   let date = new Date();
      //   this.cdata.weekCategory.unshift([date.getMonth() + 1, date.getDate() - i].join("/"));
      //
      //   // 折线图数据
      //   this.cdata.weekMaxData.push(this.cdata.maxData);
      //   let distance = Math.round(Math.random() * 11000 + 500);
      //   this.cdata.weekLineData.push(distance);
      //
      //   // 雷达图数据
      //   // 我的指标
      //   let averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
      //   let maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
      //   let hour = +(distance / 1000 / averageSpeed).toFixed(1);
      //   let radarDayData = [distance, averageSpeed, maxSpeed, hour];
      //   this.cdata.radarData.unshift(radarDayData);
      //
      //   // 平均指标
      //   let distanceAvg = Math.round(Math.random() * 8000 + 4000);
      //   let averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
      //   let maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
      //   let hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
      //   let radarDayDataAvg = [
      //     distanceAvg,
      //     averageSpeedAvg,
      //     maxSpeedAvg,
      //     hourAvg
      //   ];
      //   this.cdata.radarDataAvg.unshift(radarDayDataAvg);
      // }

    }
  }
};
</script>

<style lang="scss" scoped>
.item-box {
  width: 50% !important;
  margin-bottom: 20px;
}

.bottom-data {
  margin-bottom: 70px;
}
</style>
